<template>
	<view class="detail">
		<view class="bg">
			<view class="book">
				<view class="top">
					<view class="img-box">
						<image :src="bookImg" mode="widthFix"></image>
					</view>
					<view class="content">
						<view class="title">
							{{bookDetail.title}}
						</view>
						<view class="author">
							{{author}}
						</view>
						<view class="label">
							<view class="label-list">
								{{booktype}}
							</view>
							<view class="label-list">
								已完结
							</view>
						</view>
					</view>
				</view>
				<view class="vip-list">
					<view class="left">
						<view class="img-box">
							<image src="../../static/s-vip.png" mode="widthFix"></image>
						</view>
						<view class="title">
							開通VIP，暢享閲讀
						</view>
					</view>
					<view class="right">
						<image src="../../static/right-white.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="comments-box">
				<view class="list">
					<view class="left">
						<view class="assess">
							评价值 {{filiterNum(assess1)}}
						</view>
						<view class="text">
							评论数
						</view>
					</view>
					<view class="right">
						<view class="img-box">
							<image src="../../static/hot.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="left">
						<view class="assess">
							字节值 {{filiterNum(assess)}}
						</view>
						<view class="text">
							字数
						</view>
					</view>
					<view class="right">
						<view class="img-box">
							<image src="../../static/love.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="big-content">
				<view class="synopsis">
					<view class="title">
						简介：
					</view>
					<view class="text">
						{{bookDetail.summary}}
					</view>
				</view>
				<view class="directory" @click="goCatalog()">
					<view class="title">
						目录
					</view>
					<view class="update">
						<view class="text">
							第{{chapter}}章更新于 {{update}}
						</view>
						<view class="img-box">
							<image src="../../static/right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="chapterList">
					<view class="list" v-for="(item,index) in chapterList" :key="index">
						{{item.title}}
					</view>
				</view>
				<view class="more-directory" @click="goCatalog()">
					更多目录
				</view>

			</view>
		</view>
		<view class="bottom">
			<view class="left" v-if="!isBookstore">
				<view class="img-box">
					<image src="../../static/add.png" mode="widthFix"></image>
				</view>
				<view class="add-book" @click="addBookstore()">
					加入书架
				</view>
			</view>
			<view class="left" v-if="isBookstore">
				<view class="img-box">
					<image src="../../static/add.png" mode="widthFix"></image>
				</view>
				<view class="add-book">
					已加入书架
				</view>
			</view>
			<view class="right" v-if="!isHistory">
				<view class="img-box">
					<image src="../../static/book.png" mode="widthFix"></image>
				</view>
				<view class="read" @click="goRead()">
					立即阅读
				</view>
			</view>
			<view class="right" v-if="isHistory">
				<view class="img-box">
					<image src="../../static/book.png" mode="widthFix"></image>
				</view>
				<view class="read" @click="goNewRead()">
					继续阅读
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'detail',
		data() {
			return {
				id: '',
				bookDetail: [],
				bookImg: '',
				author: '',
				booktype: '',
				assess: '',
				assess1: '',
				update: '',
				chapter: '',
				chapterList: [],
				userInfo: [],
				user: [],
				isBookstore: false,
				isHistory: false,
				history: [],
			};
		},
		onBackPress() {
			this.back();
			return true;
		},
		methods: {
			back() {
				uni.switchTab({
					url: '../bookshelf/bookshelf'
				})
			},
			getBookDetail() {
				uni.request({
					url: `https://apis.netstart.cn/yunyuedu/book/getsub.json?id=${this.id}`,
					method: 'GET'
				}).then(res => {
					// console.log('res ==> ', res);
					this.bookDetail = res.data.feed.entry
					this.bookImg = res.data.feed.entry.link[1].href
					this.author = res.data.feed.entry.author.name
					this.booktype = res.data.feed.entry['pris:book'].category
					this.assess = res.data.feed.entry['pris:book'].words
					this.update = res.data.feed.entry['pris:book'].updated.slice(0, 10)
					this.chapter = res.data.feed.entry['pris:book'].totalArticleCount[0]
					uni.hideLoading()
					// console.log('this.bookDetail ==> ', this.bookDetail);
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			// getComments() {
			// 	uni.request({
			// 		url: `https://apis.netstart.cn/yunyuedu/comment/getComments.json?bookId=${this.id}`,
			// 		method: 'GET'
			// 	}).then(res => {
			// 		// console.log('res ==> ', res);
			// 		// this.assess1 = res.data.all.totalcount
			// 	}).catch(err => {
			// 		console.log('err => ', err);
			// 	})
			// },
			getChapter() {
				uni.request({
					url: `https://apis.netstart.cn/yunyuedu/reader/book/info.json?source_uuid=${this.id}`,
					method: 'GET'
				}).then(res => {
					// console.log('res ==> ', res);
					// this.chapterList = res.data.data.catalog
					this.assess1 = res.data.data.book.commentCount
					for (let i = 0; i < 5; i++) {
						this.chapterList.push(res.data.data.catalog[i])
					}
					// console.log('this.chapterList ==> ', this.chapterList);
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			goRead() {
				uni.navigateTo({
					url: `../read/read?bookId=${this.id}&catalogId=${this.chapterList[0].uuid}`
				})
			},
			goCatalog() {
				uni.navigateTo({
					url: '../catalog/catalog?id=' + this.id,
				})
			},
			addBookstore() {
				let user = uni.getStorageSync('userInfo');
				this.userInfo = JSON.parse(user);
				console.log(this.userInfo);
				uniCloud.callFunction({
					name: 'getUser',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					// console.log('res ==> ', res);
					this.user = res.result.data[0];
					console.log(this.user);
					this.user.bookstore.push(this.bookDetail);
					this.isBookstore = true;
					uniCloud.callFunction({
						name: 'addBookstore',
						data: {
							phone: this.userInfo.phone,
							bookstore: this.user.bookstore
						}
					}).then(res1 => {
						console.log('res1 ==> ', res1);
						uni.showToast({
							title: '加入书架成功',
							icon: 'none'
						})
					}).catch(err1 => {
						console.log('err1 ==> ', err1);
					})

					console.log(this.user);
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			getBookstore() {
				let user = uni.getStorageSync('userInfo');
				this.userInfo = JSON.parse(user);
				uniCloud.callFunction({
					name: 'getUser',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					// console.log('res ==> ', res);
					this.user = res.result.data[0];
					// console.log('this.user ==> ', this.user);
					for (let i = 0; i < this.user.bookstore.length; i++) {
						if (this.bookDetail.id === this.user.bookstore[i].id) {
							this.isBookstore = true
						}
						// else {
						// 	this.isBookstore = false
						// }
					}
					// console.log(this.isBookstore);
					let history = this.user.history
					let index = history.findIndex((item) => item.bookId === this.id);
					this.history = history[index]
					// console.log(index);
					if (index >= 0) {
						this.isHistory = true
					}
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			goNewRead(){
				uni.navigateTo({
					url:`../read/read?bookId=${this.history.bookId}&catalogId=${this.history.catalogId}`
				})
			},
			filiterNum(value) {
				let num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 1000) / 10) + 'w+';
				} else if (value < 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 1000) / 10) + 'w'
				}
				// this.assess = num
				return num;
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在加载中...'
			});
			this.id = option.id;
			this.getBookDetail();
			// this.getComments();
			this.getChapter();
			this.getBookstore();
		}
	}
</script>

<style lang="scss">
	.bottom {
		width: 100%;
		height: 120rpx;
		background-color: #F0CEAD;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.left {
			display: flex;

			.img-box {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					display: block;
				}
			}

			.add-book {
				margin-left: 20rpx;
			}
		}

		.right {
			width: 360rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #f78817 0%, #e86f2d 100%);
			border-radius: 80rpx;
			display: flex;
			// align-items: center;
			justify-content: center;

			.img-box {
				width: 40rpx;
				height: 40rpx;
				margin-top: 25rpx;

				image {
					width: 100%;
					display: block;
				}
			}

			.read {
				margin-left: 20rpx;
				color: white;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}

	.bg {
		width: 100%;
		// height: 1234rpx;
		height: 100vh;
		background-image: url('../../static/background-image.png');
		background-repeat: no-repeat;
	}

	.book {
		width: 674rpx;
		height: 440rpx;
		margin: 0 auto;

		.top {
			display: flex;
			padding-top: 100rpx;

			.img-box {
				width: 188rpx;
				height: 250rpx;
				margin-left: 30rpx;
				border-radius: 30rpx;

				image {
					width: 100%;
					display: block;
					border-radius: 30rpx;
				}
			}

			.content {
				margin-left: 40rpx;

				.title {
					font-size: 36rpx;
					font-weight: 700;
					margin-top: 14rpx;
					color: #3B3B3B;
				}

				.author {
					font-size: 26rpx;
					margin-top: 80rpx;
				}

				.label {
					margin-top: 16rpx;
					display: flex;

					.label-list:nth-child(1) {
						margin-left: 0;
					}

					.label-list {
						margin-left: 20rpx;
						height: 44rpx;
						background-color: #F4831B;
						font-size: 24rpx;
						color: white;
						padding-left: 20rpx;
						padding-right: 20rpx;
						line-height: 44rpx;
						border-radius: 24rpx;
						border: 1rpx solid #FC768A;
					}
				}
			}

		}

		.vip-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 70rpx;
			background-color: #D8AF7A;
			margin-top: 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;

			.left {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				.img-box {
					width: 32rpx;
					height: 32rpx;

					image {
						width: 100%;
						display: block;
					}
				}

				.title {
					font-size: 24rpx;
					color: white;
					margin-left: 20rpx;
				}
			}

			.right {
				width: 34rpx;
				height: 34rpx;
				// background-color: red;
				margin-right: 20rpx;

				image {
					width: 100%;
					display: block;
				}
			}
		}
	}

	.comments-box {
		width: 100%;
		height: 130rpx;
		background-color: #FCECCC;
		display: flex;
		align-items: center;

		.list:nth-child(1) {
			border-right: 2px solid #FC768A;
		}

		.list {
			width: 336rpx;
			height: 104rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;

			.left {
				.assess {
					font-size: 30rpx;
					font-weight: 700;
				}

				.text {
					font-size: 25rpx;
					color: #8d8d8f;
					margin-top: 20rpx;
				}

			}

			.right {
				.img-box {
					width: 60rpx;
					height: 60rpx;
					// background-color: red;
					margin-left: 30rpx;

					image {
						width: 100%;
						display: block;
					}
				}
			}
		}
	}

	.big-content {
		margin-top: 20rpx;
		width: 100%;
		height: 900rpx;
		background-color: #FCECCC;

		.synopsis {
			width: 660rpx;
			margin: 0 auto;
			// margin-left: 30rpx;
			padding-top: 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: 700;
			}

			.text {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				margin-top: 20rpx;
				font-size: 30rpx;
			}
		}

		.directory {
			width: 100%;
			height: 84rpx;
			border-top: 1px solid #FC768A;
			border-bottom: 1px solid #FC768A;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				margin-left: 30rpx;
			}

			.update {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #77828a;

				.img-box {
					width: 26rpx;
					height: 26rpx;
					margin-left: 20rpx;
					margin-right: 30rpx;

					// background-color: red;
					image {
						width: 100%;
						display: block;
					}
				}
			}
		}

		.chapterList {
			margin-top: 30rpx;

			.list {
				margin-left: 80rpx;
				font-size: 28rpx;
				color: #77828a;
				margin-top: 10rpx;
			}
		}

		.more-directory {
			background-color: #f5851a;
			width: 660rpx;
			height: 70rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 70rpx;
			font-size: 26rpx;
			color: white;
			border-radius: 20rpx;
			margin-top: 40rpx;
		}
	}
</style>